.sr-control-status {
  background: #F1F4F8;
  width: 100%;
  height: 100%;
  .header{
    padding: 2vh 0 1vh 0;
    color: #61636F;
    font-size: 22px;
    font-weight: 500;
  }
  .control-status-content {
   .content-type{
      display: flex;
      //align-items: center;
      .item {
        flex: 1;
        margin: 1vh 1vw 2vh 0;
        background: #fff;
        height: 20vh;
        padding: 1vh 1vw;
        border-radius: 10px;
        box-shadow: 0 0 12px #DBDBDB;
        .title {
          padding: 1vh 0;
          display: flex;
          justify-content: space-between;
          span {
            font-weight: bold;
            color: #61636F;
          }
          i {
            color: #E4E6E9;
          }
        }
        .content {
          margin: 2vh 0;
          font-size: 12px;
          color: #B0B0B0;
        }
        .num {
          //text-align: center;
          display: flex;
          justify-content: space-around;
          color: #236BD5;
          font-size: 34px;
        }
      }

    }
   .content-chart{
      margin: 0 1vw 2vh 0;
      height: 60vh;
      display: flex;
      justify-content: space-between;
      .line-chart {
        flex: 4;
        background: #FFFFFF;
        border-radius: 10px;
        margin-right: 1vw;
        padding: 16px;
      }
     .pie{
       flex: 2;
       background: #FFFFFF;
       border-radius: 10px;
       padding: 16px;
       .pie-title {
         display: flex;
         justify-content: space-between;
         span:first-child{
           font-size: 20px;
           font-weight: bold;
           color: #5A5C68;
         }
         span:last-child{
           border: 1px solid #8D8E96;
           border-radius: 20px;
           font-size: 4px;
           padding: 4px 1vw;
         }
       }
     }
   }
  }
}
